import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableHighlight} from 'react-native';
// 导入轮播图组件
import Swiper from 'react-native-swiper';
// Actions 表示要进行路由的JS操作了，可以跳转到新路由
import {Actions} from 'react-native-router-flux';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // lunBoTu: [],
    };
  }

  // 由于通过这个api已经无法获得图片，所以采用 从文件中读取 死图片 的方法
  // UNSAFE_componentWillMount() {
  //   fetch('http://vue.studyit.io/api/getlunbo')
  //     .then(res => res.json())
  //     .then(data => {
  //       this.setState({
  //         lunBoTu: data.message,
  //       });
  //       console.warn(data.message);
  //     });
  // }

  render() {
    return (
      <View style={{backgroundColor: 'white', height: '100%'}}>
        <View style={{height: 220}}>
          <Swiper showsButtons={true} autoplay={true} loop={true}>
            {/* {this.state.lunBoTu.map((item, i) => {
              return (
                <View key={i}>
                  <Image
                    source={{uri: item.img}}
                    style={{width: '100%', height: '100%'}}></Image>
                </View>
              );
            })} */}

            <View>
              <Image
                source={require('../../Images/swiper-1.png')}
                style={{width: '100%', height: '100%'}}></Image>
            </View>
            <View>
              <Image
                source={require('../../Images/swiper-2.png')}
                style={{width: '100%', height: '100%'}}></Image>
            </View>
          </Swiper>
        </View>

        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          <View style={styles.box}>
            <Image
              source={require('../../Images/menu1.png')}
              style={{width: 60, height: 60}}></Image>
            <Text>新闻资讯</Text>
          </View>

          <View style={styles.box}>
            <Image
              source={require('../../Images/menu2.png')}
              style={{width: 60, height: 60}}></Image>
            <Text>图片分析</Text>
          </View>

          <View style={styles.box}>
            <Image
              source={require('../../Images/menu3.png')}
              style={{width: 60, height: 60}}></Image>
            <Text>商品购买</Text>
          </View>

          <View style={styles.box}>
            <Image
              source={require('../../Images/menu4.png')}
              style={{width: 60, height: 60}}></Image>
            <Text>视频专区</Text>
          </View>

          <TouchableHighlight
            onPress={this.goMovieList}
            style={styles.box}
            underlayColor="white">
            <View>
              <Image
                source={require('../../Images/menu5.png')}
                style={{width: 60, height: 60}}></Image>
              <Text>热映电影</Text>
            </View>
          </TouchableHighlight>

          <View style={styles.box}>
            <Image
              source={require('../../Images/menu6.png')}
              style={{width: 60, height: 60}}></Image>
            <Text>联系我们</Text>
          </View>
        </View>
      </View>
    );
  }

  goMovieList = () => {
    Actions.movielist();
  };
}

// 轮播图样式
var styles = StyleSheet.create({
  box: {
    width: '33.33%',
    alignItems: 'center',
    marginTop: 15,
  },
});
